<template>
  <div class="container">
    <el-row>
      <el-form :model="formInline" @keyup.enter.native="search">
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.in.ordernumber')" :label-width="formLabelWidth">
            <el-input maxlength="30" show-word-limit v-model="formInline.ordercode"></el-input>
          </el-form-item>
          <el-form-item label="SKU" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.productspeccode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.storeordercode')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.storeordercode" placeholder></el-input>
          </el-form-item>
          <el-form-item label="SupplierCode" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.suppliercode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.ordertype')" :label-width="formLabelWidth">
            <el-select v-model="formInline.ordertype" :placeholder="$t('m.choose')">
              <el-option v-for="item in ordertype" :key="item.id" :label="item.label" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('m.review.ifOutstock')" :label-width="formLabelWidth">
            <el-select v-model="formInline.outstock" :placeholder="$t('m.choose')">
              <el-option
                v-for="(item, index) in outStock"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item :label="$t('m.tasknumber')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.tasknumber" placeholder></el-input>
          </el-form-item>-->
        </el-col>
         <el-col :span="6" align="left">
          <el-form-item :label="$t('m.out.tsareaid')" :label-width="formLabelWidth">
            <el-input maxlength="20" show-word-limit v-model="formInline.tsareacode" placeholder></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-form-item>
            <el-button type="primary" @click="search" v-if="hasPermission('search')">{{$t('m.query')}}</el-button>
            <!-- <el-button @click="print" v-if="hasPermission('print')">{{$t('m.print')}}</el-button> -->
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="ellipse"></div>
    <el-table
      ref="table"
      stripe
      empty-text
      fits
      v-loading="tableLoading"
      class="table-wrap single-select-table"
      :data="tableData"
      :row-style="tableRowStyle"
      :row-class-name="tableRowClassName"
      @row-click="rowClick"
      @selection-change="handleSingleSelectionChange">
      <el-table-column align="center" type="selection" width="55"></el-table-column>
      <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
      <el-table-column align="center" prop="reviewcode" :label="$t('m.review.reviewcode')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-reviewCode')">
            <el-button type="text" @click.stop="reviewResultOpen(scope.row)">
              {{scope.row.reviewcode}}

            </el-button>
          </template>
          <template v-else>{{scope.row.reviewcode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="tsareacode" :label="$t('m.out.tsareaid')"></el-table-column>
      <el-table-column align="center" prop="reviewusers" :label="$t('m.charge')"></el-table-column>
      <el-table-column align="center" prop="reviewdate" :label="$t('m.review.reviewdate')" :formatter="reviewdate"></el-table-column>
      <el-table-column align="center" prop="handlingTime" :label="$t('m.out.handletime')"></el-table-column>
      <el-table-column align="center" prop="ordercode" :label="$t('m.in.ordernumber')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-orderCode')">
            <el-button type="text" @click.stop="$router.push({ path: 'order/orderInfo', query: {orderid:scope.row.orderid}})">{{scope.row.ordercode}}</el-button>
          </template>
          <template v-else>{{scope.row.ordercode}}</template>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="storeordercode" :label="$t('m.out.storeordercode')"></el-table-column>
      <!-- <el-table-column :label="$t('m.state')" align="center" prop="statetext">
        <template slot-scope="scope">
          <span v-if="scope.row.state==1">{{$t('m.review.state1')}}</span>
          <span v-if="scope.row.state==2">{{$t('m.review.state2')}}</span>
          <span v-if="scope.row.state==3">{{$t('m.review.state3')}}</span>
        </template>
      </el-table-column>
      <el-table-column :label="$t('m.out.ordertype')" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.ordertype==1">{{$t('m.out.ordertype1')}}</span>
          <span v-if="scope.row.ordertype==2">{{$t('m.out.ordertype2')}}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="totalnumber"
        :label="$t('m.out.totalnumber')"
      ></el-table-column>-->
      <!-- <el-table-column align="center" prop="shopname" :label="$t('m.out.shopname')"></el-table-column> -->
      <el-table-column align="center" prop="consignee" :label="$t('m.out.consignee')"></el-table-column>
      <el-table-column align="center" prop="contact" :label="$t('m.out.contact')"></el-table-column>
       <el-table-column align="center" :label="$t('m.review.ifOutstock')">
        <template slot-scope="scope">{{scope.row.outstock | outstockFilters}}</template>
      </el-table-column>
        <el-table-column align="center" :label="$t('m.remark')">
        <template slot-scope="scope">
          <template v-if="hasPermission('table-remark')">
            <el-button type="text" @click.stop="handleRemark(scope.row)">{{$t('m.remark')}}
              <template v-if="'marktype' in scope.row">
                <i :class="[['info','primary','warning','danger'][scope.row.marktype],'el-icon-s-flag','flag']"></i>
              </template>
            </el-button>
          </template>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="provincename" :label="$t('m.out.provincename')"></el-table-column>
      <el-table-column align="center" prop="cityname" :label="$t('m.out.cityname')"></el-table-column>
      <el-table-column align="center" prop="regionname" :label="$t('m.out.regionname')"></el-table-column>
      <el-table-column align="center" prop="shippingaddress" :label="$t('m.out.address')"></el-table-column>-->
    </el-table>

    <el-pagination background layout="sizes, prev, pager, next, jumper" :page-sizes="pageSizeList" :page-size="rowSize" :current-page="page" :total="totalRows" @current-change="currentChangeInitFn" @size-change="handleSizeChangeInitFn"></el-pagination>

    <!-- 复核结果 dialog 开始 -->
    <el-dialog width="1200px" :title="$t('m.review.reviewtitle')" :visible.sync="dialogFormVisible" @close="close">
      <div v-loading="popLoading">
        <el-row :gutter="30" class="waveHead">
          <el-col :span="6" align="left" :offset="2">
            <b>{{$t('m.review.reviewcode')}}:</b>
            <span>{{reviewData.reviewcode}}</span>
          </el-col>
          <el-col :span="6" align="left">
            <b>{{$t('m.in.ordernumber')}}:</b>
            <span>{{reviewData.ordercode}}</span>
          </el-col>
          <el-col :span="10" align="left">
            <b>{{$t('m.out.storeordercode')}}:</b>
            <span>{{reviewData.storeordercode}}</span>
          </el-col>
        </el-row>
        <el-row class="waveHead" :gutter="30" style="margin-bottom:30px">
          <el-col :span="6" align="left" :offset="2">
            <b>{{$t('m.state')}}:</b>
            <span v-if="reviewData.state==1">{{$t('m.review.state1')}}</span>
            <span v-if="reviewData.state==2">{{$t('m.review.state2')}}</span>
            <span v-if="reviewData.state==3">{{$t('m.review.state3')}}</span>
          </el-col>
          <el-col :span="6" align="left">
            <b>{{$t('m.review.reviewusers')}}:</b>
            <span>{{reviewData.reviewusers}}</span>
          </el-col>
          <el-col :span="10" align="left">
            <b>{{$t('m.review.reviewdate')}}:</b>
            <span>{{reviewData.reviewdate}}</span>
          </el-col>
        </el-row>
        <el-table ref="resultTable" stripe :data="reviewData.reviewDetailOutputs" empty-text fits>
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" width="150" :label="$t('m.task')+'ID'" prop="tasknumber"></el-table-column>
          <el-table-column align="center" label="SKU" prop="productspeccode"></el-table-column>
          <el-table-column align="center" label="SupplierCode" prop="suppliercode"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productname')" prop="productname"></el-table-column>
          <el-table-column align="center" :label="$t('m.in.productspec')" prop="productspec"></el-table-column>
          <el-table-column align="center" :label="$t('m.out.quantity')" prop="quantity"></el-table-column>
          <el-table-column align="center" :label="$t('m.review.stockoutquantity')" prop="stockoutquantity"></el-table-column>

          <!-- <el-table-column align="center" :label="$t('m.review.cartons')" prop="cartons"></el-table-column>
          <el-table-column align="center" :label="$t('m.review.bulkitems')" prop="bulkitems"></el-table-column> -->
        </el-table>
        <div class="btns">
          <el-button size="mini" @click="close">{{$t('m.close')}}</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 操作备注 dialog 开始 -->
    <handleRemarkPopup
      v-if="handleRemarkPopupVisible"
      :popupVisible="handleRemarkPopupVisible"
      :popupData="handleRemarkData"
      @callback="init"
      @close="handleRemarkPopupVisible=false">
    </handleRemarkPopup>
  </div>
</template>

<script>
import common from '@/utils/common'
import { getLodop } from '@/utils/LodopFuncs'
let __this
export default {
  name:'ReviewPackaging',
  data(){
    return {
      popLoading:false,
      currentRow:null,
      formInline:{
        ordercode:'',
        ordertype:'',
        shippingaddress:'',
        shopid:'',
        productspeccode:'',
        stateid:null,
        storeordercode:'',
        warehouseid:null,
        suppliercode:null,
        tsareacode:'',
        outstock:'' //缺货
      },
      tableData:[],
      dialogFormVisible:false,
      dialogFormVisible1:false,
      dialogFormVisible2:false,
      formLabelWidth:'180px',
      reviewData:{},
      reviewForm:{
        reviewpackagingdetail:{
          bulkitems:null,
          cartons:null,
          createid:null,
          creator:'',
          detailid:null,
          productid:null,
          productname:'',
          productspec:'',
          productspeccode:'',
          quantity:null,
          reviewid:null,
          suppliercode:'',
          tasknumber:''
        },
        packingrate:null,
        scanBarcode:null,
        reviewpackagingdetails:[]
      },
      reviewDetailOutputs:[],
      reviewid:null,

      boxForm:{
        packageinfo:[]
      },
      picLink:'',

      handleRemarkPopupVisible:false, //备注 dialog 显示隐藏
      handleRemarkData:undefined
    }
  },
  beforeCreate(){
    __this = this
  },
  computed:{
    states(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.quality.state1')
        },
        {
          id:2,
          label:this.$t('m.out.state2')
        },
        {
          id:3,
          label:this.$t('m.out.state3')
        },
        {
          id:4,
          label:this.$t('m.review.state1')
        },
        {
          id:5,
          label:this.$t('m.out.state5')
        }
      ]
    },
    ordertype(){
      return [
        {
          id:null,
          label:this.$t('m.all')
        },
        {
          id:1,
          label:this.$t('m.out.ordertype1')
        },
        {
          id:2,
          label:this.$t('m.out.ordertype2')
        }
      ]
    },
    // 是否缺货
    outStock(){
      return [
        {
          value:'',
          label:this.$t('m.all')
        },
        {
          value:0,
          label:this.$t('m.no')
        },
        {
          value:1,
          label:this.$t('m.yes')
        }
      ]
    },
    pickingtype(){
      return [
        {
          id:1,
          label:this.$t('m.out.pickingtype1')
        },
        {
          id:2,
          label:this.$t('m.out.pickingtype2')
        }
      ]
    }

  },
  filters:{
    outstockFilters(value){
      let result = __this.outStock.find(item => item.value === value)
      return result ? result.label : ''
    }
  },
  components:{
    handleRemarkPopup:()=>import('@/components/review/handle-remark-popup')
  },
  methods:{
    init(){
      this.tableLoading = true
      this.$axios({
        method:'get',
        url:'/reviewpackaging/historylist',
        params:{
          page:this.page,
          rows:this.rowSize,
          outstock:this.formInline.outstock,
          ordercode:this.formInline.ordercode,
          ordertype:this.formInline.ordertype,
          productspeccode:this.formInline.productspeccode,
          storeordercode:this.formInline.storeordercode,
          suppliercode:this.formInline.suppliercode,
          tasknumber:this.formInline.tasknumber,
          tsareacode:this.formInline.tsareacode
        }
      }).then(({ data }) => {
        for (let i = 0;i < data.records.length;i++){
          data.records[
            i
          ].receivingdate = common.timestampToTime(
            data.records[i].receivingdate
          )
        }
        this.tableData = data.records
        this.totalRows = data.total
        setTimeout(() => this.tableLoading = false, 500)
        this.tableData.forEach(v => {
          if (v.handlingTime){
            v.handlingTime = this.formatSeconds(v.handlingTime)
          } else {
            v.handlingTime = '- -'
          }
        })
      })
    },
    formatSeconds(value){
      let result = parseInt(value)
      // let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600)
      let m = Math.floor((result / 60)) < 10 ? '0' + Math.floor((result / 60)) : Math.floor((result / 60))
      let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60))
      result = `${m}:${s}`
      return result
    },
    search(){
      this.page = 1
      this.init()
    },
    print(){
      if (!this.tableRowSelected.length){
        this.$message(
          this.$t('m.chooseprint') + this.$t('m.review.reviewcode')
        )
      } else {
        let LODOP = getLodop()
        let obj = {
          ids:[Number(this.tableRowSelected[0].reviewid)],
          templateName:'packing'
        }
        this.$axios({
          method:'post',
          url:'/printtemplate/query',
          data:obj
        }).then(({ data }) => {
          this.printContent = data
          eval(this.printContent)
          LODOP.SET_PRINT_PAGESIZE(1, '100mm', '73mm', '')
          LODOP.PREVIEW()
          this.init()
        })
      }
    },
    close(){
      // this.$refs[formName].resetFields();
      this.dialogFormVisible = false
      this.reviewData = {}
      this.reviewid = null
      this.init()
    },
    closeReview(){
      this.dialogFormVisible1 = false
      this.picLink = ''
      this.$refs['reviewForm'].resetFields()
      this.reviewid = null
      this.init()
    },
    // 操作备注
    handleRemark(row){
      this.handleRemarkPopupVisible = true
      let detail = []
      if('marktype' in row){
        detail = JSON.parse(row.remark)
      }
      this.handleRemarkData = {
        id:row.reviewid,
        detail
      }
    },
    reviewResultOpen(row){
      this.reviewid = row.reviewid
      this.dialogFormVisible = true
      this.reviewResult(row)
    },
    reviewResult(){
      let that = this
      that.reviewForm.reviewpackagingdetails = []
      that.popLoading = true
      that
        .$axios({
          method:'get',
          url:`/reviewpackaging/getreviewwithdetails/${this.reviewid}`
        })
        .then(({ data }) => {
          data.reviewdate = common.timestampToTime(
            data.reviewdate
          )
          that.reviewData = data
          if (that.tableRowSelected.length){
            that.reviewForm.reviewpackagingdetails =
              data.reviewDetailOutputs
          }
          that.popLoading = false
        })
    },
    reviewdate(row){
      return common.timestampToTime(row.reviewdate)
    }
  },
  activated(){
    this.init()
  },
  beforeRouteLeave(to, form, next){
    this.dialogFormVisible = false
    this.dialogFormVisible1 = false
    this.dialogFormVisible2 = false
    this.handleRemarkPopupVisible = false
    next()
  }
}
</script>
<style lang="scss" scoped>
.el-select {
  width: 100%;
}
.flag{font-size: 20px; vertical-align: middle;}
.info{color: #909399}
.primary{color: #409EFF}
.warning{color: #E6A23C}
.danger{color: #F56C6C}
</style>